<template>
    <div class="frame-controller" v-show="show">
      <div class="horn left-top"></div>
      <div class="horn left-bottom"></div>
      <div class="horn right-top"></div>
      <div class="horn right-bottom"></div>
      <div class="title">{{ name }}</div>
      <div ref="echarts" class="echarts" id="pop-up-echarts"></div>
      <button class="close" @click="close">✖</button>
    </div>
</template>
<script>
export default {
  name: 'pop-up-frame',
  data() {
    return {
      year: '',
      name: '',
      apiType: '',
      companyData: {},
      echarts: null,
      show: false,
      xAxisData: ['一月','二月','三月',
                  '四月','五月','六月',
                  '七月','八月','九月',
                  '十月','十一月','十二月'],
      seriesData1: [0,0,0,0,0,0,
                    0,0,0,0,0,0],
      sum: 0,
      // barTopColor: ["#02c3f1", "#53e568", "#a154e9",
      //               "#02c3f1", "#53e568", "#a154e9",
      //               "#02c3f1", "#53e568", "#a154e9",
      //               "#02c3f1", "#53e568", "#a154e9"],
      barTopColor: ["rgb(66,220,255)", "rgb(66,220,255)", "rgb(66,220,255)",
                    "rgb(66,220,255)", "rgb(66,220,255)", "rgb(66,220,255)",
                    "rgb(66,220,255)", "rgb(66,220,255)", "rgb(66,220,255)",
                    "rgb(66,220,255)", "rgb(66,220,255)", "rgb(66,220,255)"],
      barBottomColor: [
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
          "rgba(66,220,255,0.5)",
      ],
      // barBottomColor: [
      //     "rgba(2,195,241,0.1)",
      //     "rgba(83, 229, 104, 0.1)",
      //     "rgba(161, 84, 233, 0.1)",
      //     "rgba(2,195,241,0.1)",
      //     "rgba(83, 229, 104, 0.1)",
      //     "rgba(161, 84, 233, 0.1)",
      //     "rgba(2,195,241,0.1)",
      //     "rgba(83, 229, 104, 0.1)",
      //     "rgba(161, 84, 233, 0.1)",
      //     "rgba(2,195,241,0.1)",
      //     "rgba(83, 229, 104, 0.1)",
      //     "rgba(161, 84, 233, 0.1)",
      // ],
      lineData: [0,0,0,0,0,0,0,0,0,0,0,0]

    }
  },
  computed: {
    option() {
      var that = this;
      return {
        grid: {
          top: '15%',
          bottom: '15%'
        },
        xAxis: {
          data: this.xAxisData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 25,
            align: 'center',
            // formatter: function (params, index) {
            //   return '{a|' + (that.seriesData1[index] / that.sum * 100).toFixed(2) + '%}' + '\n' + '{b|' + params + '}';
            // },
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              rich: {
                a: {
                  fontSize: 12,
                  color: '#ffffff'
                },
                b: {
                  height: 20,
                  fontSize: 14,
                  color: '#ffffff'
                }
              }
            }
          },
          interval: 0
        },
        yAxis: {
          name: '(万元)',
          nameLocation: 'end',
          nameTextStyle: {
            color: '#fff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgba(144,200,248,0.4)'],
              type: 'dashed'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#fff'
          }
        },
        series: [{
          name: '数据源',
          type: 'bar',
          label: {
            show: true,
            position: 'top',
            fontSize: 16,
            color: 'rgb(66,220,255)'
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return new that.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: that.barTopColor[params.dataIndex]
                      // color: that.barTopColor[params.dataIndex]
                    },
                      {
                        offset: 1,
                        color: that.barBottomColor[params.dataIndex]
                      }
                    ]
                );
              },
              opacity: 1
            }
          },
          z: 16,
          silent: true,
          barWidth: 26,
          barGap: '-100%', // Make series be overlap
          data: this.seriesData1
        }, {
          // 分隔
          type: "pictorialBar",
          itemStyle: {
            normal: {
              color: "rgb(4,26,65)"
              // color: "#061326"
            }
          },
          symbolRepeat: "fixed",
          symbolMargin: 6,
          symbol: "rect",
          symbolClip: true,
          symbolSize: [27, 4],
          symbolPosition: "start",
          symbolOffset: [0, -1],
          // symbolBoundingData: this.total,
          data: this.lineData,
          width: 25,
          z: 0,
          zlevel: 1,
        }
        ]
      }
    }

  },
  methods: {
    // 关闭
    close() {
      this.show = false
      this.echarts.dispose()
      this.seriesData1 = [0,0,0,0,0,0,0,0,0,0,0,0]
      this.lineData = [0,0,0,0,0,0,0,0,0,0,0,0]
      this.sum = 0
    },
    // 请求
    fetchForGroup() {
      this.$util.http.get(
        `excel/08/infoYear/${this.$store.year}/${this.name}/${this.apiType}`
      ).then(res=>{
        res.data.forEach(r=>{
          this.seriesData1[r.month-1] = r.accumulate
          this.lineData[r.month-1] = r.accumulate
          this.sum += r.accumulate
        })
        this.echarts = this.$echarts.init(this.$refs.echarts)
        this.echarts.setOption(this.option)
        window.onresize = this.echarts.resize;
      })
    },
  },
  mounted() {

    this.bus.$on('pop-up-frame-show', row => {
      this.show = true
      this.name = row.name
      this.apiType = row.apiType!=null?row.apiType:2
      this.fetchForGroup()

    })
    this.bus.$on('pop-up-frame-hide', ()=>{
      this.show = false
      this.echarts.dispose()
    })
  }
}
</script>
<style scoped>
.frame-controller {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 500px;
  width: 1100px;
  background-color: rgba(3, 22, 49, 0.7);
  backdrop-filter: blur(3px);
  box-shadow: inset 0px 0px 3px 0px #2A67BD;
  border: 1px solid #72A2F9;
  z-index: 1000;
}

.title {
  font-size: 18px;
  color: #ffffff;
  width: 50%;
  line-height: 40px;
  margin: 20px 0 0 20px;
  padding-left: 10px;
  text-align: left;
  height: 40px;
  background: linear-gradient(90deg, #2A8EFB 0%, rgba(4, 25, 65, 0) 100%);
}

.horn {
  position: absolute;
  height: 10px;
  width: 10px;
}

.left-top {
  top: 3px;
  left: 3px;
  background: linear-gradient(to left top, transparent, transparent 50%, #42DCFF 50%, #42DCFF);
}

.left-bottom {
  bottom: 3px;
  left: 3px;
  background: linear-gradient(to left bottom, transparent, transparent 50%, #42DCFF 50%, #42DCFF);
}

.right-bottom {
  bottom: 3px;
  right: 3px;
  background: linear-gradient(to right bottom, transparent, transparent 50%, #42DCFF 50%, #42DCFF);
}

.right-top {
  top: 3px;
  right: 3px;
  background: linear-gradient(to right top, transparent, transparent 50%, #42DCFF 50%, #42DCFF);
}

.echarts {
  width: 100%;
  height: 440px;
}
.close {
  position: absolute;
  top: 15px;
  right: 15px;
  height: 35px;
  width: 35px;
  border-radius: 50px;
  border: 0;
  background: rgb(24,144,255);
  font-size: 20px;
  cursor: pointer;
}
.close:hover {
  background: rgb(20,111,196);
}
</style>